<template>
    <div class="article-detail-container p-t-55">
        <div class="detail-wrap">
            <div class="detail-title">{{ list.title }}</div>
            <div class="detail-meta">
                <div class="detail-meta-item">
                    <p>
                        <svg viewBox="0 0 1024 1024" width="15" height="15" :fill="svg.fill">
                            <path :d="svg.category" p-id="13124"></path>
                        </svg>
                        <router-link
                            :to="{ name: 'Article', query: { category: list.category_id } }"
                        >
                            {{ list.category_title }}
                        </router-link>
                    </p>
                </div>
                <div class="detail-meta-item">
                    <p class="tags">
                        <svg viewBox="0 0 1024 1024" width="14" height="14" :fill="svg.fill">
                            <path :d="svg.tags" p-id="2239"></path>
                        </svg>
                        <router-link
                            :to="{ name: 'Article', query: { tag: i.id } }"
                            v-for="i in list.tags"
                            :key="i.id"
                        >
                            {{ i.title }}
                        </router-link>
                    </p>
                </div>
                <div class="detail-meta-item">
                    <p>
                        <svg viewBox="0 0 1024 1024" width="16" height="16" :fill="svg.fill">
                            <path :d="svg.click"></path>
                        </svg>
                        <span>{{ list.click }}</span>
                    </p>
                </div>
                <div class="detail-meta-item">
                    <p>
                        <svg viewBox="0 0 1024 1024" width="13" height="13" :fill="svg.fill">
                            <path :d="svg.comment"></path>
                        </svg>
                        <span>0</span>
                    </p>
                </div>
                <div class="detail-meta-item">
                    <p>
                        <svg viewBox="0 0 1024 1024" width="15" height="15" :fill="svg.fill">
                            <path :d="svg.time.d1"></path>
                            <path :d="svg.time.d2"></path>
                        </svg>
                        <span>{{ formatTime(list.created_time) }}</span>
                    </p>
                </div>
            </div>
            <div class="detail-content" v-html="list.content"></div>
            <div class="detail-link">
                <router-link :to="{ name: 'ArticleDetail', query: { id: prev.id } }" v-if="prev">
                    上一篇：{{ prev.title }}
                </router-link>
                <router-link :to="{ name: 'ArticleDetail', query: { id: next.id } }" v-if="next">
                    下一篇：{{ next.title }}
                </router-link>
            </div>
        </div>
        <div class="comment-wrap">
            <h2 class="comment-title">
                <svg viewBox="0 0 1024 1024" width="20" height="20" fill="#34495e">
                    <path
                        d="M906.68 436.31v180.51c0 80.71-48.86 146.36-108.9 146.36H431.94v19.18c0 47.43 28.88 86.23 64.17 86.23h269.13l33.24 91.62 33.24-91.62h63.45c35.29 0 64.17-38.81 64.17-86.23V521c-0.01-42.17-22.83-77.33-52.66-84.69z"
                    ></path>
                    <path
                        d="M888.06 606.91V198.58c0-74.09-45.11-134.71-100.24-134.71H164.45c-55.13 0-100.24 60.62-100.24 134.71v408.33c0 74.09 45.11 134.71 100.24 134.71h99.11l51.92 143.13 51.92-143.13h420.42c55.18 0 100.24-60.62 100.24-134.71z m-632.5-169.46a53.35 53.35 0 1 1 53.35-53.35 53.35 53.35 0 0 1-53.35 53.35z m221.38 0a53.35 53.35 0 1 1 53.36-53.35 53.35 53.35 0 0 1-53.35 53.35z m221.39 0a53.35 53.35 0 1 1 53.35-53.35 53.35 53.35 0 0 1-53.35 53.35z"
                    ></path>
                </svg>

                留言板
            </h2>
            <ol class="comment-list">
                <li class="comment-item" v-for="item in comment" :key="item.id">
                    <div class="comment-avatar">
                        <img src="@/assets/image/default.png" v-if="!item.master" />
                        <img src="@/assets/image/avatar.jpeg" v-if="item.master" />
                    </div>
                    <div class="comment-content">
                        <div class="comment-original">
                            <div class="comment_hd">
                                <div class="comment_info">
                                    <div class="name">
                                        <p>
                                            <el-icon><Avatar /></el-icon>
                                            {{ item.name }}
                                            {{ item.master == 1 ? '(博主)' : '' }}
                                        </p>
                                    </div>
                                    <div class="time">
                                        <el-icon><Clock /></el-icon>
                                        {{ formatTime(item.created_time) }}
                                    </div>
                                </div>
                            </div>
                            <div class="comment_bd">
                                <p>{{ item.content }}</p>
                            </div>
                            <div class="comment_ft">
                                <p @click="onReply(item)">
                                    <svg viewBox="0 0 1024 1024" width="15" height="15">
                                        <path
                                            d="M1024 512C1024 229.236364 794.786909 0 512 0 229.259636 0 0 229.236364 0 512s229.236364 512 512 512c109.381818 0 210.501818-34.536727 293.701818-92.974545l167.121455 41.774545-41.774546-167.121455A509.137455 509.137455 0 0 0 1024 512z m-715.636364 73.681455a60.113455 60.113455 0 1 1 0-120.22691 60.113455 60.113455 0 0 1 0 120.22691z m209.454546 0a60.113455 60.113455 0 1 1 0-120.22691 60.113455 60.113455 0 0 1 0 120.22691z m209.454545 0a60.113455 60.113455 0 1 1 0-120.22691 60.113455 60.113455 0 0 1 0 120.22691z"
                                        ></path>
                                    </svg>
                                </p>
                            </div>
                        </div>
                        <ul class="comment-reply">
                            <li
                                class="comment-reply-item hvr-shadow"
                                v-for="v in item.childrens"
                                :key="v.id"
                            >
                                <div class="comment_hd">
                                    <div class="comment_info">
                                        <div class="name">
                                            <p>
                                                <el-icon><Avatar /></el-icon>
                                                {{ v.name }}
                                                {{ v.master == 1 ? '(博主)' : '' }}
                                            </p>
                                            <span>回复</span>
                                            <p>
                                                <el-icon><Avatar /></el-icon>
                                                {{ v.reply_name }}
                                                {{ v.reply_master == 1 ? '(博主)' : '' }}
                                            </p>
                                        </div>
                                        <div class="time">
                                            <el-icon><Clock /></el-icon>
                                            {{ formatTime(v.created_time) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="comment_bd">
                                    <p>{{ v.content }}</p>
                                </div>
                                <div class="comment_ft">
                                    <p @click="onReply(v)">
                                        <svg viewBox="0 0 1024 1024" width="15" height="15">
                                            <path
                                                d="M1024 512C1024 229.236364 794.786909 0 512 0 229.259636 0 0 229.236364 0 512s229.236364 512 512 512c109.381818 0 210.501818-34.536727 293.701818-92.974545l167.121455 41.774545-41.774546-167.121455A509.137455 509.137455 0 0 0 1024 512z m-715.636364 73.681455a60.113455 60.113455 0 1 1 0-120.22691 60.113455 60.113455 0 0 1 0 120.22691z m209.454546 0a60.113455 60.113455 0 1 1 0-120.22691 60.113455 60.113455 0 0 1 0 120.22691z m209.454545 0a60.113455 60.113455 0 1 1 0-120.22691 60.113455 60.113455 0 0 1 0 120.22691z"
                                            ></path>
                                        </svg>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ol>
            <el-pagination
                :currentPage="currentPage"
                :page-size="pageSize"
                :page-sizes="pageSizes"
                small
                background
                :layout="layout"
                :total="total"
                hide-on-single-page
                class="comment-pagination"
                @current-change="handleCurrentChange"
            />
        </div>
        <comment-editor ref="commentRef" @input="getContent">
            <template v-slot:reply>
                <div class="reply-wrap" v-show="reply">
                    <div class="post-reply">
                        <span>正在回复</span>
                        <span class="post-reply_name">
                            {{ reply.name }}{{ reply.master == 1 ? '（博主）' : '' }}
                        </span>
                        <span>的评论：</span>
                    </div>
                    <div class="post-content">
                        <span>{{ reply.content }}</span>
                    </div>
                    <el-button round size="small" @click="onCancel"> 取消回复 </el-button>
                </div>
            </template>
            <template v-slot:button>
                <el-button round size="small" :loading="loading" @click="onSubmit">
                    提 交
                </el-button>
            </template>
        </comment-editor>

        <layout-footer />
    </div>
</template>

<script>
import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
import { onBeforeRouteUpdate } from 'vue-router';
import { svg as SVG } from '@/global/local-data';
import articleService from '@/global/service/articleService.js';

export default {
    name: 'ArticleDetail',
    setup() {
        const { proxy } = getCurrentInstance();
        // 表格
        let table = reactive({
            loading: false,
            rowId: 0,
            list: '',
            comment: [],
            prev: '',
            next: '',
            currentPage: proxy.$config.pagination.currentPage, // 默认页
            pageSize: proxy.$config.pagination.pageSize, // 每页多少条
            pageSizes: proxy.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
            layout: proxy.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
            total: 0 // 总条数
        });
        let svg = SVG;
        let id = proxy.$route.query.id;
        let commentId = 0;
        let loading = ref(false); //等待按钮
        // 表单
        let form = {
            articleId: id,
            content: '',
            name: '',
            mail: '',
            url: ''
        };
        let reply = ref('');
        // 获取详情
        const getById = async () => {
            const { code, data } = await articleService.getById({ id });

            if (code === 200) {
                table.list = data.list;
                table.prev = data.prev;
                table.next = data.next;
            }
        };
        // 获取评论列表
        const getCommentList = async () => {
            const { code, data } = await articleService.getCommentList({
                id,
                page: table.currentPage, //查询第几页
                per_page: table.pageSize //每页多少条数据
            });

            if (code === 200) {
                table.comment = data.list;
                table.total = data.total;
            }
        };
        // 当前页
        const handleCurrentChange = (val) => {
            table.currentPage = val;
            getCommentList();
        };
        // 回复
        const onReply = (obj) => {
            commentId = obj.id;
            reply.value = obj;

            const offsetTop = proxy.$jq('.comment-editor')[0].offsetTop;
            proxy.$jq('html,body').animate({ scrollTop: offsetTop }, 800);
        };
        // 取消回复
        const onCancel = () => {
            proxy.$refs.commentRef.$refs['formRef'].resetFields();
            reply.value = '';
            commentId = 0;
        };
        // 输入框
        const getContent = (obj) => {
            form.content = obj.content;
            form.name = obj.name;
            form.mail = obj.mail;
            form.url = obj.url;
        };
        // 表单提交
        const onSubmit = async () => {
            loading.value = true;

            if (loading.value) {
                if (commentId) form.id = commentId;

                const { code, msg, data } = await articleService.addComment(form);

                if (code === 200) {
                    proxy.$msg.success(msg);
                    getCommentList();
                    onCancel();

                    loading.value = false;
                } else {
                    proxy.$msg.error(data ? data : msg);
                    loading.value = false;
                }
            }
        };
        // 时间格式化
        const formatTime = (value) => {
            return proxy.$formatTime(value);
        };

        // 监听路由
        onBeforeRouteUpdate((to) => {
            id = to.query.id;
            getById();
            getCommentList();
        });

        getCommentList();
        getById();

        return {
            svg,
            // list,
            ...toRefs(table),
            loading,
            handleCurrentChange,
            reply,
            onReply,
            onCancel,
            getContent,
            onSubmit,
            formatTime
        };
    }
};
</script>

<style lang="less">
.article-detail-container {
    max-width: 1100px;
    margin: 0 auto;
}
.detail-wrap {
    margin: 0 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    box-shadow: 0 8px 16px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    border-radius: 10px;
    .detail-title {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 1rem !important;
        color: #34495e;
        font-weight: bold;
    }
    .detail-meta {
        font-size: 12px;
        border-top: 1px solid #ddd;
        background-color: #f5f8fa;
        border-bottom: 1px solid #ddd;
        padding: 10px 0;
        line-height: 16px;
        .detail-meta-item {
            display: inline-block;
        }
        p {
            display: flex;
            align-items: center;
            margin: 0 15px 0 0 !important;
            border-right: 1px solid #ddd;

            &:last-child {
                border: none;
            }
            svg {
                margin-right: 5px;
            }
        }

        .tags {
            a {
                margin-right: 5px;
            }
        }
    }
    .detail-link {
        display: flex;
        justify-content: space-between;
        margin-top: 2rem;

        a {
            display: block;
            &:hover {
                color: #f74c22;
            }
        }
    }
}
.language-markup {
    color: #d4deec;
    background-color: #001628;
}
.language-javascript {
    color: #47cdf5;
    background: #001628;
}

@media (min-width: 800px) {
    .detail-link {
        a {
            max-width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
@media (max-width: 800px) {
    img {
        width: 100%;
    }
}
</style>
